<template>
  <div class="optionIcon" @click="changeIcon">
    <component :is="optionIcon" class="iconfont"></component>
  </div>
  <el-menu active-text-color="#ffd04b" background-color="#66ccff" :collapse="isCollapse" default-active="2" text-color="#fff" :router="true">

    <template v-for="item1 in $router.options.routes">
      <!--只有一级分类-->


      <el-menu-item :index="item1.path" v-if="item1.meta?.isShow != false && item1.children == undefined">
        <component :is="item1.meta?.icon" class="iconfont"></component>
        <span>{{ item1.meta?.title }}</span>
      </el-menu-item>

      <!--有二级分类-->
      <el-sub-menu :index="item1.path" v-if="item1.meta?.isShow != false && item1.children != undefined">
        <template #title>
          <component :is="item1.meta?.icon" class="iconfont"></component>
          <span>{{ item1.meta?.title }}</span>
        </template>

        <template v-for="item2 in item1.children">
          <el-menu-item :index="item2.path" v-if="item2.meta?.isShow != false">
            <component :is="item2.meta?.icon" class="iconfont"></component>

            {{ item2.meta?.title }}
          </el-menu-item>
        </template>
      </el-sub-menu>

    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const optionIcon = ref("Fold")

const isCollapse = ref(false)

const changeIcon = () =>{
  optionIcon.value = optionIcon.value == "Fold" ? "Expand" : "Fold"

  isCollapse.value =!isCollapse.value;
}

</script>
<style scoped>
.iconfont {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.optionIcon{
  height: 20px;
  background-color: gold;
  color: #fff;
  text-align: center;

}

</style>